/**
 * 品牌类型页底部组件
 */
<script setup>
import PureChart from '@/components/type/TypeCharts/PureChart.vue'
import WarehousingChart from '@/components/type/TypeCharts/WarehousingChart.vue'
import QuantityChart from '@/components/type/TypeCharts/QuantityChart.vue'
import DirectPPHTable from '@/components/type/TypeTables/DirectPPHTable.vue'

import { useWarehousingStore } from '@/stores/type'

const warehousingStore = useWarehousingStore()
</script>

<template>
  <div class="type-bottom-container">
    <div class="type-bottom-item">
      <PureChart/>
    </div>

    <div @click="warehousingStore.show()" class="type-bottom-item type-bottom-item-light">
      <WarehousingChart/>
    </div>

    <div class="type-bottom-item">
      <QuantityChart/>
    </div>

    <div class="type-bottom-item">
      <DirectPPHTable/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.type-bottom-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;

  .type-bottom-item {
    width: 49%;
    height: 48%;
    box-sizing: border-box;
    border: 0.5vh solid #40436e;
    border-radius: 1.25vh;
    pointer-events: auto;
  }

  .type-bottom-item-light {
    transition: all 0.25s ease-in-out;

    &:hover {
      border-color: #406e43;
    }
  }
}
</style>